import 'package:flutter/material.dart';
import 'package:wallpaper/generated/l10n.dart';
import 'package:wallpaper/model/my_bottom_base.dart';

class MyBottomNavBar extends StatefulWidget {
  final int selectIndex;
  final Function(int) changeTabbar;
  const MyBottomNavBar({
    super.key,
    required this.selectIndex,
    required this.changeTabbar,
  });

  @override
  State<MyBottomNavBar> createState() => _MyBottomNavBarState();
}

class _MyBottomNavBarState extends State<MyBottomNavBar> {
  // 统一尺寸参数
  static const double iconSize = 20.0;
  static const double fontSize = 12.0;
  static const double itemHeight = 50.0;
  static const double iconTextSpacing = 1.0;

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    List<MyBottomBase> tabbars = [
      MyBottomBase(
        name: S.of(context).home,
        icon: Icons.home,
        selectIcon: Icons.home_outlined,
      ),
      MyBottomBase(
        name: S.of(context).category,
        icon: Icons.category,
        selectIcon: Icons.category_outlined,
      ),
      MyBottomBase(
        name: S.of(context).moe,
        icon: Icons.filter_frames,
        selectIcon: Icons.filter_frames_outlined,
      ),
      MyBottomBase(
        name: S.of(context).moehu,
        icon: Icons.auto_awesome_mosaic,
        selectIcon: Icons.auto_awesome_mosaic_outlined,
      ),
      MyBottomBase(
        name: S.of(context).setting,
        icon: Icons.settings,
        selectIcon: Icons.settings_outlined,
      ),
    ];

    return Container(
      decoration:
          BoxDecoration(color: colorScheme.primaryContainer, boxShadow: [
        BoxShadow(
          color: colorScheme.shadow,
          blurRadius: 0.1,
          spreadRadius: 0,
          offset: const Offset(0, -0.1),
        ),
      ]),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          for (int i = 0; i < tabbars.length; i++)
            Expanded(
              child: InkWell(
                onTap: () => widget.changeTabbar(i),
                child: SizedBox(
                  height: itemHeight,
                  child: _buildNavItem(context, i, colorScheme, tabbars),
                ),
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildNavItem(BuildContext context, int i, ColorScheme colorScheme,
      List<MyBottomBase> tabbars) {
    final isSelected = widget.selectIndex == i;
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 图标动画
        _buildAnimatedIcon(isSelected, tabbars[i]),
        SizedBox(height: iconTextSpacing),
        // 文字动画
        _buildAnimatedText(isSelected, tabbars[i].name, colorScheme),
      ],
    );
  }

  Widget _buildAnimatedIcon(bool isSelected, MyBottomBase tab) {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 300),
      transitionBuilder: (child, animation) => ScaleTransition(
        scale: animation,
        child: FadeTransition(
          opacity: animation,
          child: child,
        ),
      ),
      child: Icon(
        isSelected ? tab.selectIcon : tab.icon,
        key: ValueKey(isSelected), // 强制重建实现动画
        size: iconSize,
        color: isSelected
            ? Theme.of(context).colorScheme.primary
            : Theme.of(context).colorScheme.onSurface,
      ),
    );
  }

  Widget _buildAnimatedText(
      bool isSelected, String text, ColorScheme colorScheme) {
    return AnimatedDefaultTextStyle(
      duration: const Duration(milliseconds: 300),
      style: TextStyle(
        fontSize: fontSize,
        color: isSelected ? colorScheme.primary : colorScheme.onSurface,
        fontWeight: isSelected ? FontWeight.w500 : FontWeight.normal,
      ),
      child: Text(text),
    );
  }
}
